<template>
	<view class="serveListView">
		<nav-bar isBack title="会话列表"></nav-bar>
		<navigator class="user-box" v-for="item in userListData.list" :url="`/pages_customer/pages/index?to=${item.user_im_account}&chat_id=${item.chat_id}&partner_id=${item.partner_id}&partner_type=${item.partner_type}`">
			<view class="head">
				<image v-if="item.userInfo && item.userInfo.headimg && item.userInfo.headimg.path" :src="item.userInfo.headimg.path">
				<image v-else src="https://manager.ryz1620.com/static/my/avator.png">
			</view>
			<view class="info">
				<view class="row-1">
					<text class="name">{{item.userInfo.nickname || '未设置'}}</text>
					<text class="time">{{getYMDHMS(item.msg_timestamp*1000)}}</text>
				</view>
				<!-- <view class="row-2">{{getLastMsgTxt(item)}}</view> -->
				<view class="row-2">{{item.shopinfo.shopname}}</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar"
	import customeApi from '@/service/custome.js'
	export default{
		components:{
			navBar
		},
		data(){
			return{
				userListData:{
					loading:false,
					list:[],
					page:0,
					pagesize:1000
				},
				timData: {
					status: false,
					userID: '',
					userSig: '',
					to: ''
				},
			}
		},
		computed:{
			timMsg(){
				return this.$store.state.tim.msg
			},
		},
		onLoad(){
			this.$utils.getUrl()
			// this.getCustomeAccount();
			this.getChatList();
		},
		methods:{
			getCustomeAccount(){
				customeApi.getAccount().then(res=>{
					if(res.code === 1){
						this.timData.userID = res.data.im_user;
						this.timData.userSig = res.data.sig;
						this.getChatList();
					}else{
						this.$utils.showErr({title: res.data.msg})
					}
				})
			},
			
			getChatList(){
				this.userListData.page = this.userListData.page+1
				customeApi.chatList({page:1,pagesize:this.userListData.pagesize}).then(res=>{
					if(res.code === 1){
						this.userListData.list = res.data.list
					}else{
						this.$utils.showErr({title: res.data.msg})
					}
				})
			},
			getYMDHMS (timestamp) {
			  let time = new Date(timestamp)
			  let year = time.getFullYear()
			  const month = (time.getMonth() + 1).toString().padStart(2, '0')
			  const date = (time.getDate()).toString().padStart(2, '0')
			  const hours = (time.getHours()).toString().padStart(2, '0')
			  const minute = (time.getMinutes()).toString().padStart(2, '0')
			  const second = (time.getSeconds()).toString().padStart(2, '0')
		
			  // return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
			  return hours + ':' + minute + ':' + second
			},
			getLastMsgTxt(item){
				if(!item || !item.lastMsg || !item.lastMsg.msg_content){
					return ""
				}
				let msg_content = JSON.parse(item.lastMsg.msg_content);
				if(!msg_content){
					return ""
				}
				let Desc = JSON.parse(msg_content.Desc);
				if(!Desc){
					return ""
				}
				let format = Desc.format;
				if(!format){
					return ""
				}
				if(format == 'string'){
					return msg_content.Data || ""
				}
				return '系统消息'
			}
		},
		watch: {
			timMsg(newVal,oldVal){
				if(newVal){
					let rei = this.userListData.list.findIndex(r=>r.user_im_account == newVal.from);
					if(rei === -1){
						this.getChatList()
					}else{
						this.$set(this.userListData.list[rei],last_time,newVal.time)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}
	
	.serveListView {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #F8F8F8;
		.user-box {
			display: flex;
			padding: 0 20rpx;
			align-items: center;
			cursor: pointer;
			background: #fff;
			margin-bottom: 20rpx;
		
			.head {
				width: 120rpx;
				height: 120rpx;
				position: relative;
				margin-right: 20rpx;
		
				img {
					width: 100%;
					height: 100%;
					border-radius: 1000px;
				}
			}
		
			.info {
				flex: 1;
		
				.row-1 {
					margin-bottom: 10rpx;
		
					.name {
						font-size: 30rpx;
						color: #333;
					}
		
					.time {
						float: right;
					}
				}
		
				.row-2 {
					color: #939393;
					font-size: 26rpx;
				}
			}
		
			&.onmsg .head::before {
				content: ' ';
				display: block;
				width: 10px;
				height: 10px;
				background-color: red;
				border: 2px solid #fff;
				position: absolute;
				top: 0;
				right: 0;
				border-radius: 10px;
			}
		
			&.active,
			&:hover {
				background-color: #fff;
			}
		}
	}
</style>
